<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script>
  function $ (dom) {
    return document.querySelector(dom)
  }
  function handleError (error) {
    console.error('getUserMedia error:', error)
  }
</script>
<body>
<div>
  <label>audio input:</label>
  <select id="audioInput"></select>
  <br>
  <label>audio output:</label>
  <select id="audioOutput"></select>
  <br>
  <label>video input:</label>
  <select id="videoInput"></select>
  <br>
  <video autoplay playsinline id="player"></video>
</div>
<script>
  'use strict'

  var $videoPlay = $('video#player');


  /**
   * 三维 提供给你的接口
   *
   * @return {Promise<MediaStream>}
   */
  function testGetUserMedia(constraints) {
    return window.navigator.mediaDevices.getUserMedia(constraints)
  }


  /**
   * 你来使用
   */
  var constraints = {
    // 是否使用视频
    video: true,
    // 是否使用音频
    audio: true,
  };
  testGetUserMedia(constraints)
    .then((stream) => {
      $videoPlay.srcObject = stream;
    })
</script>
</body>
</html>
